<template>
    <div class="organization">
        <div class="header" @click="openPopup">
            <div class="header-content">
                <div class="name">{{selectPartsName? selectPartsName : '未选择'}}</div>
                <span class="iconfont icon1" v-if="!show">&#xe669;</span>
                <span class="iconfont icon2" v-if="show">&#xe669;</span>
            </div>
        </div>
        <popup v-model="show" :show-mask="false" class="popup">
            <div class="main_wrapper" v-if="show">
                <!-- <div class="search">
                    <div class="inputBox">
                        <input type="text" class="searchFun" v-model="userContent" placeholder="搜索">
                        <span class="searchPic" @click="getUserData">
                           <svg t="1574841932546" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1231" width="20" height="20" style="display:inline-block;margin-top:7px;">
                                <path d="M464.433658 859.411431c-213.688847 0-387.540384-173.851537-387.540384-387.540384S250.744811 84.330664 464.433658 84.330664s387.540384 173.851537 387.540384 387.540384S678.121482 859.411431 464.433658 859.411431zM464.433658 118.030184c-195.110723 0-353.840864 158.730141-353.840864 353.840864s158.730141 353.840864 353.840864 353.840864 353.840864-158.730141 353.840864-353.840864S659.544381 118.030184 464.433658 118.030184z" p-id="1232" fill="#ffffff"></path>
                                <path d="M925.33691 939.669336 706.292078 754.324024 728.061894 728.60527 947.106726 913.950582Z" p-id="1233" fill="#ffffff"></path>
                            </svg>
                        </span>
                    </div>
                </div> -->
                <div v-if="partsData.length==0" class="not-content">
                    <img src="/static/img/zwlr-icon.png">
                    <div class="title">暂无数据</div>
                </div>
                <ul id="demo" v-else>
                    <li class="userList" v-for="(item,index) in partsData" :key="index">
                        <span class="userListContent">{{item}}</span>
                        <input class="selecet_depart" name='department' type="radio"  @click="getSelectData(item)" />
                    </li>
                </ul>
            </div>
        </popup>
        <div class="footer" v-if="show">
            <div class="cancel" @click="show = false">取消</div>
            <div class="btn" @click="confirm">完成</div>
        </div>
    </div>
</template>
<script>
    import { Popup } from "vux";
import DeviceDao from '../../daos/device_dao'

    export default {
        name:'order',
        components:{
            Popup
        },
        props: {
            partsId:String,
            componentId:[Number,String]
        },
        data: function () {
            return {
                show:false,
                partsData:[],//所有处理人
                userContent:"",//用户输入的内容
                partsName:{},
                selectPartsName:'',
            }
        },
        mounted(){
            this.partsName = "";
        },
        methods: {
            getParts: function(){
                DeviceDao.getDeviceOrder({deviceId:this.partsId,componentId:this.componentId},res=>{
                    this.partsData = res.workSheets;
                })
            },

            // 打开选择器
            openPopup(){
                if(this.partsId){
                    this.show = true;
                    this.getParts();
                }else{
                    alert("请选择设备或部件后，在选择工单！");
                    return false;
                }
                
            },
            // 单选按钮的点击事件
            getSelectData(data){
                this.partsName = data;
            },
            // 点击完成按钮
            confirm(){
                this.show = false;
                if(JSON.stringify(this.partsName) != "{}"){
                    this.selectPartsName = this.partsName;
                    this.$emit("getOrderData",this.selectPartsName);
                }
            },
        },
    }
</script>
<style lang="less" scoped>
    @import '../../styles/iconfont.css';
    .organization .vux-popup-mask{
        display: none !important;
    }
    .organization{
        width: 100%;
        // padding-left: 10px;
    }
    .main_wrapper{
        width: 100%;
        color: #fff;
        width: 100%;
        z-index: 999;
        font-size: 16px;
    }
    .header {
    //   padding: 13px 0;
      width: 100%;
      font-size: 16px;
      line-height: 16px;
    //   color:#fff;
      padding: 0 !important;
      .header-content {
        padding: 0 !important;
        width: 100%;
        display: flex;
        // align-items: center;
        justify-content: right;
        img {
          width: 5px;
          height: 11px;
          margin-left: 15px;
        }
      }
    }
    .footer {
        position: fixed;
        bottom: 0px;
        right: 0;
        width: 100%;
        padding: 20px 0;
        background: #18182c;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index:999;
        .cancel,.btn {
            padding: 10px 5px !important;
            background: #3967DC;
            color: #ffffff;
            font-size: 16px;
            width: 145px;
            text-align: center;
            border-radius:20px;
        }
        .cancel{
            margin-right: 20px;
        }
    }
    .iconfont{
        margin-right: 10px;
        font-size: 14px;
    }
    .vux-popup-dialog{
        height: 100vh !important;
        top: 0;
        bottom: unset!important;
        background: #18182c!important;
        font-size: 14px;
        padding: 0 11px 0 13px;
        box-sizing: border-box;
    }
    .name{
        width: 100%;
        // overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
    }
    .icon1{
        margin-left: 5px;
    }
    .icon2{
        margin-left: 5px;
        transform:rotate(90deg);
        -ms-transform:rotate(90deg); 	/* IE 9 */
        -moz-transform:rotate(90deg); 	/* Firefox */
        -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
        -o-transform:rotate(90deg); 
    }
    .selecet_depart{
        // -webkit-appearance: none;
        // line-height: 40px;
        // position: absolute;
        // right:20px;
        // margin-top: 1.5em;
        position: absolute;
        right:10px;
        display: inline-block;
        vertical-align: middle;
        /* 当成为行内块元素时它就可以垂直居中了 */
        width: 18px;
        height: 18px;
        -webkit-appearance: none;
        /* 清除原有的样式 */
        background-color: transparent;
        border: 0;
        outline: 0 !important;
        /* 去掉点击后外面可能会出现的蓝框 */
        line-height: 20px;
        color: #d8d8d8;
    }

    .selecet_depart:after{
         /* //在input的内容之后插入新内容 */
        position: absolute;
        top:12px;
        right:10px;
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        text-align: center;
        line-height: 12px;/* no */
        font-size: 14px;
        color: #fff;
        border: 3px solid #ddd;
        background-color: #fff;
        box-sizing: border-box;
        margin-top: -13px;
        /* 规定两个并排的带边框的框 */
    }

    .selecet_depart:checked:after{
        /* 选中之后的样子 */
        content: "L";
        transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
        transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
        /* 2D变换旋转，还有平移和缩放，平时旋转用rotate，这个写法是比较复杂一点的写法，
        括号里面的六个值来得矩阵，实现2D变换，更详细的大家去百度查。 */
        -webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
        border-color: #456de6;
        background-color: #456de6;
        position: absolute;
        right:10px;
    }

    /********************列表的样式********************/ 
    #demo{
        position: absolute;
        top: 69px;
        right: 0;
        bottom: 40px;
        left: 0;
        overflow-y: scroll;
        padding: 0 23px;
        box-sizing: border-box;
        .userList{
            padding: 10px 0;
            border-bottom: 1px solid #434358;
            .userListContent{
                display: inline-block;
                width:80%;
                text-align: left;
            }
        }
    }

     // 搜索
    .search{
        width: 100%;
        height: 50px;
        padding: 9px 8px;
        box-sizing: border-box;
        background-color: #18182c;
        .inputBox{
            width: 100%;
            height: 100%;
            margin: 0 auto;
            background-color:#11111f;
            padding: 0 8px;
            box-sizing: border-box;
            .searchFun{
                width: 90%;
                height: 100%;
                border: none;
                outline: none;
                font-size: 15px;
                color: #ffffff;
            }
            .searchPic{
                float:right;
                width:10%;
                height:100%;
            }
        }
    }

    // 搜索框placeholder
    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
        color: #fff;
    }
    
    input:-moz-placeholder,
    textarea:-moz-placeholder {
        color: #fff;
    }
    
    input::-moz-placeholder,
    textarea::-moz-placeholder {
        color: #fff;
    }
    
    input:-ms-input-placeholder,
    textarea:-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: #fff;
    }

    .not-content{
        margin: 0 auto;
        margin-top: 50px;
        text-align: center;
        img{
          width: 64px;
          height: 64px;
          margin-left: 20px;
        }
        /*.img4{*/
          /*margin-top:70px;*/
        /*}*/
        .title{
          margin: 8px auto;
          width:126px;
          height:40px;
          font-size:14px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(158,198,251,1);
          line-height:20px;
          text-align: center;
        }
      }
</style>

